<template>
  <div style="width:100%">
    <div style="width:100%">
      <div id="linezhewailiu" style="width:100%;height:200px;top:-15px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  methods: {
    init() {
      let mychart = this.$echarts.init(document.getElementById("linezhewailiu"));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(0, 255, 233,0)'
                }, {
                  offset: 0.5,
                  color: 'rgba(255, 255, 255,1)',
                }, {
                  offset: 1,
                  color: 'rgba(0, 255, 233,0)'
                }],
                global: false
              }
            },
          },
        },
        grid: {
          top: '25%',
          left: '10%',
          right: '5%',
          bottom: '15%',
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap:false,
          axisLine: {
            lineStyle: {
              color: 'white'

            }
          },
          // 刻度标记
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei'
            },
            // align: 'right',
            // 增加刻度靠右
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          data: ['2022.5', '2022.6', '2022.7', '2022.8', '2022.9', '2022.10', '2022.11', '2022.12', '2023.1', '2023.2', '2023.3', '2023.4'],

        }],

        yAxis: [{
          name: '单位：(万支)',
          type: 'value',
          min: 0,
          max: 500,
          splitNumber: 4,
          position:'left',
          axisLine: {
            // y轴线
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: '#fff',

            },
          },
          // y轴单位标注点
          axisTick: {
            show: false,
          },
        }],
        series: [
          {
            name: '',
            type: 'line',
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#2CABE3",
              },
            },
            label: {
              show: false,
              position: 'top',
              textStyle: {
                color: '#2CABE3',
              }
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#2CABE3",
              borderWidth: 2,
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(81,150,164,0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(81,150,164,0)'
                  }
                ], false),
              }
            },
            data: ["173.1", "111.3", "135.3", "102.1", "227.54", "134.9", "111.1", "99.84", '366.53', '177.82', '136.32', '159.18']

          },
        ]
      };



      mychart.setOption(option)
    },
  },
  created() { },
  mounted() {
    this.init()
  }
};
</script>
<style lang="scss" scoped></style>